<template>
	<div class="box">
		<div class="header">
			<div class="header-top" @click="go('/usersInformation')">
				<div>
					<span>{{ ycUserEntity.userName }}</span>  <!--v-if="status == 0"-->
					<span>
						<span>{{ ycUserEntity.age}}岁</span>  <!--v-if="ycUserEntity.age != null"-->
						<span >{{ ycUserEntity.tel }}</span>  <!--v-if="ycUserEntity.tel != null"-->
					</span>

				</div>
				<div > <!--v-if="status == 0"-->
<!--					<div v-if="ycUserEntity.userPortrait != null && ycUserEntity.userPortrait != ''">-->
<!--						<img :src="ycUserEntity.userPortrait" alt="" /></div>-->
					<div >  <!--v-if="ycUserEntity.userPortrait == null || ycUserEntity.userPortrait == ''"-->
            <img :src="ycUserEntity.userPortrait" alt=""/>
					</div>
				</div>

			</div>
			<div class="header-btm">
				<div @click="go('/userDelivery')">
					<span >{{ post }}</span>  <!--v-if="status == 0"-->
					<span >投递</span>  <!--v-if="status == 0"-->
				</div>
				<div @click="go('/mianshi')">
					<span >{{ inter }}</span> <!--v-if="status == 0"-->
					<span >面试</span> <!--v-if="status == 0"-->
				</div>
				<div @click="go('/userFeedback')">
					<span >{{ feedback }}</span> <!--v-if="status == 0"-->
					<span>反馈</span>
				</div>
				<div @click="go('/usersStore')">
					<span>{{ collects }}</span> <!--v-if="status == 0"-->
					<span>收藏</span>
				</div>
			</div>
		</div>

		<div class="news" @click="go('/news')">
			<p>我的消息</p>
			<div>欢迎使用华企优才</div>
			<!-- 没有新消息就显示上面的 有新消息就显示第一条未读的消息 -->
		</div>

		<div class="func">
			<p>常用功能</p>
			<div class="quit" @click="out()">退出<img src="../../assets/quit.png" alt="" /></div>
			<div class="funcList">
				<div  @click="go('/usersResume')">  <!--v-if="status == 0"-->
					<img src="../../assets/jianli.png" alt="" />
					<span>我的简历</span>
				</div>
				<div  @click="go('/checking')">  <!--v-if="status == 0"-->
					<img src="../../assets/yanzheng.png" alt="" />
					<span>个人验证</span>
				</div>
			</div>
		</div>
    <div class="footer">
      <div @click="go('/')">
        <img src="../../assets/shouye.png" alt=""/>
        首页
      </div>

      <div @click="go('/usersFind')" v-if="status != 1">
        <img src="../../assets/faxian.png" alt=""/>
        发现
      </div>
      <div @click="go('/companyFind')" v-if="status == 1">
        <img src="../../assets/faxian.png" alt=""/>
        发现
      </div>

      <div @click="go('/recommend')" >
        <img src="../../assets/tuijian.png" alt=""/>
        推荐
      </div>

      <div @click="go('/usersMy')" class="footer-color" v-if="status != 1">
        <img src="../../assets/wode1.png" alt=""/>
        我的
      </div>
      <div @click="go('/companyMy')" v-if="status == 1">
        <img src="../../assets/wode.png" alt=""/>
        我的
      </div>
    </div>
	</div>
</template>

<script>
import {
  MessageBox,
  Toast
} from 'mint-ui'
import Vue from 'vue'
export default {
  inject: ['reload'],
  name: 'usersMy',
  components: {
    MessageBox,
    Toast
  },
  created () {
    // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
    if (window.localStorage.status === '0') {
      this.getMyData()
    }
  },
  mounted () {
    // 查询收藏数据
    this.$http({
      method: 'get',
      url: Vue.prototype.AppURL + '/index/query/user/index/data',
      params: {
        userId: this.userId
      }
    }).then(({data}) => {
      // 获取收藏数量
      this.collects = data.collectJobs
    })

    this.$http({
      method: 'get',
      url: Vue.prototype.AppURL + '/user/get/user/inter/count?userId=' + this.userId
    }).then(({data}) => {
      console.log(data)
      this.inter = data.count
    })

    this.$http({
      method: 'get',
      url: Vue.prototype.AppURL + '/user/feedback/get/user/count?userId=' + this.userId
    }).then(({data}) => {
      this.feedback = data.count
    })
  },
  // data() 为变量赋值等
  data () {
    return {
      userId: window.localStorage.getItem('userId'),
      companyId: null,
      companyUserId: null,
      status: localStorage.status,
      value: false,
      collects: 0,
      feedback: 0,
      post: 0,
      inter: 0,
      ycUserEntity: {
        userName: '',
        age: '',
        mobile: ''
      }
    }
  },
  // methods 编写js函数
  methods: {
    getMyData () {
      this.$http({
        method: 'get',
        params: {
          userId: this.userId
        },
        url: Vue.prototype.AppURL + '/user/getUserInfo/' + this.userId
      }).then(({data}) => {
        console.log(data, '===========')
        // 简历基本信息
        this.ycUserEntity = data.user
        this.post = data.post
        this.ycUserEntity.userPortrait = Vue.prototype.AppURL + '/file/' + data.user.resumePortrait
      })
    },
    getComMyData () {

    },
    go (r) {
      console.log(this.userId)
      this.$router.push(r)
    },
    out () {
      MessageBox.confirm('确定要退出该账号吗?')
        .then((action) => {
          window.localStorage.status = ''
          window.localStorage.removeItem('userId')
          console.log(localStorage.status)
          console.log(localStorage.getItem('userId'))
          this.$router.push('/')
        })
        .catch((err) => {
          console.log(err)
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	html,
	body,
	.tac,
	.box,
	.tab-left,
	.tab-left .el-menu {
		height: 100%;
	}

	.box {
		width: 100%;
	}

	.header {
		background: #3e63a8;
		width: 100%;
		height: 200px;
		color: #fff;
		position: relative;
	}

	.header-top {
		width: 100%;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20px 20px 0 20px;
		align-items: center;
	}

	.header-top div {
		font-size: 20px;
		display: flex;
		flex-flow: column;
	}

	.header-top div span:last-child {
		font-size: 12px;
		margin-top: 10px;
	}

	.header-top img {
		width: 88px;
		height: 88px;
		border-radius: 50%;
	}

	.header-btm {
		width: 100%;
		box-sizing: border-box;
		padding: 20px;
		display: flex;
		justify-content: space-between;
	}

	.header-btm div {
		display: flex;
		flex-flow: column;
		align-items: center;
		font-size: 12px;
	}

	.header-btm div span {
		margin-bottom: 5px;
	}

	.news {
		width: 90%;
		padding: 10px;
		box-sizing: border-box;
		border-radius: 10px;
		box-shadow: 2px 2px 5px #c7c7c7;
		position: relative;
		left: 5%;
		top: -20px;
		background: #fff;
		font-size: 14px;
		display: flex;
		align-items: center;
		height: 40px;
	}

	.news p {
		border-right: 1px dashed #c7c7c7;
		padding-right: 10px;
		margin-right: 10px;
	}

	.news div {
		font-size: 12px;
		color: #757575;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.func {
		width: 100%;
		position: relative;
		box-shadow: 2px 2px 5px #c7c7c7;
		margin-bottom: 10px;
	}

	.func p {
		font-size: 14px;
		font-weight: 900;
		width: 100%;
		box-sizing: border-box;
		padding: 10px;
	}

	.funcList {
		width: 100%;
		padding: 20px 0;
		display: flex;
	}

	.funcList img {
		width: 24px;
		height: 24px;
		margin-bottom: 10px;
	}

	.funcList div {
		width: 25%;
		display: flex;
		flex-flow: column;
		align-items: center;
		font-size: 14px;
	}

	.quit {
		font-size: 12px;
		display: flex;
		align-items: center;
		position: absolute;
		right: 20px;
		top: 10px;

	}

	.quit img {
		width: 18px;
		height: 18px;
		margin-left: 5px;
	}
</style>
